<template>
    <div class="md:w-2/12 mb-2">
        <div class="border bg-white hidden md:block">
            <img :src="hd.user.avatar" class="w-full object-cover cursor-pointer" @click="$router.push({ name: 'member.info.avatar' })" />
            <div class="text-gray-800 mx-3 py-4  border-b border-gray-200">{{ hd.user.name }}</div>
            <div class="my-4 mx-3 flex justify-between text-gray-500">
                <i class="fa fa-envelope" :class="{ 'text-info': hd.user.email }"></i>
                <i class="fas fa-phone" :class="{ 'text-info': hd.user.mobile }"></i>
                <i class="fab fa-weibo" :class="{ 'text-info': hd.user.weibo }"></i>
                <i class="fab fa-weixin" :class="{ 'text-info': hd.user.wechat }"></i>
                <i class="fab fa-github" :class="{ 'text-info': hd.user.github }"></i>
                <i class="fab fa-qq" :class="{ 'text-info': hd.user.qq }"></i>
            </div>
        </div>

        <div class="mt-3 border bg-white">
            <div v-for="(menu, index) in menus" :key="index" class="border-b border-gray-200">
                <router-link
                    :to="menu.to"
                    class="text-gray-500 block py-3 px-3 pl-3 hover:bg-gray-100"
                    :class="{ 'bg-gray-100 text-gray-800': menu.to.name == $route.name }"
                >
                    <i :class="menu.icon" class="w-4 inline-block"></i> {{ menu.title }}
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
const menus = [
    { title: '基本信息', to: { name: 'member.info.base' }, icon: 'fas fa-server' },
    { title: '修改头像', to: { name: 'member.info.avatar' }, icon: 'fas fa-camera-retro' },
    { title: '密码修改', to: { name: 'member.info.password' }, icon: 'fas fa-unlock-alt' },
    { title: '手机绑定', to: { name: 'member.info.mobile' }, icon: 'fas fa-phone-square-alt' },
    { title: '绑定邮箱', to: { name: 'member.info.email' }, icon: 'fas fa-envelope' },
    { title: '微信绑定', to: { name: 'member.info.wechat' }, icon: 'fab fa-weixin' }
]
export default {
    data() {
        return { menus }
    }
}
</script>

<style></style>
